<template>
    <div class="p-2">

  


  
      <!-- 预览需求需求对话框 -->
      <el-dialog :title="dialog.title" v-model="dialog.viewVisible" append-to-body :show-close="false">
        <el-form ref="requireFormRef" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="需求类型" prop="requireType" disabled>
                <el-select v-model="form.requireType" placeholder="请选择需求类型">
                  <el-option v-for="dict in pm_require_type" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="关联客户">
                <el-select v-model="form.tenantId" filterable placeholder="请选择" disabled>
                  <el-option v-for="([key, value], index) in Object.entries(clientList)" :key="key" :label="value"
                    :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="请选择状态" disabled>
                  <el-option v-for="dict in pm_require_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="优先级" prop="priority" disabled>
                <el-select v-model="form.priority" placeholder="请选择优先级">
                  <el-option v-for="dict in pm_priorities" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联人员" disabled>
                <el-select v-model="form.relatedUsers" filterable multiple placeholder="请选择">
                  <el-option v-for="([key, value], index) in Object.entries(postOptions)" :key="key" :label="value"
                    :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建者" prop="projectCode">
                <el-input v-model="form.createByName" placeholder="请输入创建者" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间" prop="projectCode">
                <el-input v-model="form.createTime" placeholder="请输入创建时间" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="修改者">
                <el-input v-model="form.updateByName" placeholder="修改者" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="修改时间">
                <el-input v-model="form.updateTime" placeholder="请输入创建时间" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="相关图片" disabled  v-if="form.files">
            <imageUpload  v-model="form.files"  />
          </el-form-item>
          <el-form-item label="内容">
            <div class="content" v-html="form.content" @click="showImg($event)"></div>
          </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="Back">返 回</el-button>
        </div>
      </template>
      </el-dialog>
      <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">
        <i class="Close" id="imgDolgClose" @click.stop="imgPreview.show = false"></i>
        <img @click.stop="imgPreview.show = true" :src="imgPreview.img" style="width: 50%; height: 80%;" />
      </div>
      <!-- 转任务对话框 -->
      <el-dialog :title="dialog.title" v-model="showresolve" append-to-body width="95%">
  
      <PageWrapLayout>
      <div style="margin-bottom: 20px">
        <div style="display: flex; justify-content: flex-end">
          <el-radio-group v-model="radio">
            <el-radio label="top">添加到顶部</el-radio>
            <el-radio label="bottom">添加到底部</el-radio>
            <el-radio label="hide">隐藏</el-radio>
          </el-radio-group>
        </div>
        <el-divider />
        <EditableProTable
          ref="table"
          :mode="radio"
          :columns="column"
          :data="list"
          :editable-keys="editableKeys"
          @add="add"
          @on-change="onChange"
          @del="deleteAction"
        />
        <div style="margin-top: 20px">
          <el-button @click="resets">重置</el-button>
          <el-button type="primary" @click="config">提交</el-button>
        </div>
      </div>
    </PageWrapLayout>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="Require" lang="ts">
  import EditableProTable from '@/components/Table/EditableProTable/index.vue'
  import { listRequire, getRequire, delRequire, addRequire, updateRequire } from '@/api/pm/require';
  import { RequireVO, RequireQuery, RequireForm } from '@/api/pm/require/types';
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
    const { pm_priorities, pm_task_type, pm_require_status } = toRefs<any>(proxy?.useDict('pm_priorities', 'pm_task_type', 'pm_require_status'));
  import api from '@/api/system/user';
  const {  pm_require_type } = toRefs<any>(proxy?.useDict( 'pm_require_type'));
    const route = useRoute();
    const router = useRouter();
  const clientList = ref([]);
  const postOptions = ref([]);
  const requireList = ref<RequireVO[]>([]);
  const buttonLoading = ref(false);
  const loading = ref(true);
  const showSearch = ref(false);
  const ids = ref<Array<string | number>>([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const showclient = ref(false);
  const showresolve = ref(false);
  const queryFormRef = ref<ElFormInstance>();
  const requireFormRef = ref<ElFormInstance>();
  const imgPreview = ref({
    img: '', // 存储预览图片的URL
    show: false, // 控制模态框的显示状态
  });
  const projectList = ref([]);
  const dialog = reactive<DialogOption>({
    visible: false,
    title: '',
    viewVisible: false,
  });
  // 列显隐信息
  const columns = ref<FieldOption[]>([
    { key: 0, label: `标题`, visible: true, children: [] },
    { key: 1, label: `需求类型`, visible: true, children: [] },
    { key: 2, label: `优先级`, visible: true, children: [] },
    { key: 3, label: `内容`, visible: false, children: [] },
    { key: 4, label: `关联客户`, visible: false, children: [] },
    { key: 5, label: `关联人员`, visible: true, children: [] },
    { key: 6, label: `状态`, visible: true, children: [] },
    { key: 7, label: `创建者`, visible: true, children: [] },
    { key: 8, label: `创建时间`, visible: false, children: [] },
    { key: 9, label: `修改者`, visible: false, children: [] },
    { key: 10, label: `修改时间`, visible: false, children: [] }
  ]);
  
  const initFormData: RequireForm = {
    id: undefined,
    tenantId: undefined,
    title: undefined,
    requireType: undefined,
    priority: undefined,
    content: undefined,
    files: undefined,
    relatedUsers: undefined,
    status: undefined,
    createByName: undefined,
    updateByName: undefined,
    createDeptName: undefined
  }
  const data = reactive<PageData<RequireForm, RequireQuery>>({
    form: { ...initFormData },
    queryParams: {
      pageNum: 1,
      pageSize: 50,
      tenantId: undefined,
      title: undefined,
      requireType: undefined,
      priority: undefined,
      status: undefined,
      params: {
      }
    },
    rules: {
      title: [
        { required: true, message: "标题不能为空", trigger: "blur" }
      ],
      requireType: [
        { required: true, message: "需求类型不能为空", trigger: "change" }
      ],
      priority: [
        { required: true, message: "优先级不能为空", trigger: "change" }
      ],
      status: [
        { required: true, message: "状态不能为空", trigger: "change" }
      ],
    }
  });
  const table = ref()
  const column = [
      { name: 'title', label: '任务标题', width: 160 },
      {
        name: 'projectId',
        label: '项目',
        options: [
          {
            value: -1,
            label: '全部',
          },
          {
            value: 1,
            label: '未解决',
          },
          {
            value: 0,
            label: '已解决',
          },
        ],
        valueType: 'select',
      },
      {
        name: 'requireId',
        label: '需求',
        options: [
          {
            value: -1,
            label: '全部',
          },
          {
            value: 1,
            label: '未解决',
          },
          {
            value: 0,
            label: '已解决',
          },
        ],
        valueType: 'select',
      },
  
      {
        name: 'milestoneId',
        label: '里程碑',
        options: [
          {
            value: -1,
            label: '全部',
          },
          {
            value: 1,
            label: '未解决',
          },
          {
            value: 0,
            label: '已解决',
          },
        ],
        valueType: 'select',
      },
  
      {
        name: 'taskType',
        label: '任务类型',
        options: pm_task_type.value,
        valueType: 'select',
      },
      {
        name: 'priority',
        label: '优先级',
        options: [
          {
            value: -1,
            label: '全部',
          },
          {
            value: 1,
            label: '未解决',
          },
          {
            value: 0,
            label: '已解决',
          },
        ],
        valueType: 'select',
      },
      {
        name: 'owner',
        label: '负责人',
        options: [
          {
            value: -1,
            label: '全部',
          },
          {
            value: 1,
            label: '未解决',
          },
          {
            value: 0,
            label: '已解决',
          },
        ],
        valueType: 'select',
      },
  
      {
        name: 'startDate',
        label: '开始时间',
        valueType: 'date',
      },
      {
        name: 'status',
        label: '状态',
        options: [
          {
            value: "待处理" ,
            label: "待处理" ,
          },
          {
            value: "处理中",
            label: "处理中",
          },
          {
            value: "已关闭",
            label: "已关闭",
          },
          {
            value: "已删除" ,
            label: "已删除" ,
          },
          {
            value: "非需求",
            label: "非需求",
          },
          {
            value: "重复",
            label: "重复",
          },
        ],
        valueType: 'select',
      },
      {
        name: 'content',
        label: '内容',
        valueType: 'input',
      },
    ]
  
    let datas = [ ]
  
    let arrKeys = datas.map((item) => item.id).filter((item) => ![6247418504, 6246921229].includes(item))
    const radio = ref('bottom')
    const list = ref(datas)
    let editableKeys = ref(arrKeys)
    const dataSource = ref(datas)
    const deleteAction = (row) => {
      console.log('删除', row)
      ElMessage.success('点击删除')
    }
    const onChange = (val) => {
      dataSource.value = val
    }
    const add = () => {}
  
    // 重置
    const resets = () => {
      ElMessage.success('重置成功')
      table.value.reset()
    }
    const config = () => {
      list.value = dataSource.value
      console.log('点击提交=========', dataSource.value)
      ElMessage.success('点击提交数据')
    }
  
  const { queryParams, form, rules } = toRefs(data);
  
  
  const showImg = (e) => {
    if (e.target.tagName === 'IMG' && e.target.src) {
      imgPreview.value.img = e.target.src; // 更新预览图片的URL
      imgPreview.value.show = true; // 显示模态框
    }
  };
  const Back = () => {
  router.back();
}

  const getTypes = async (id: string | number) => {
  loading.value = true;
  const res = await getRequire(id);
  dialog.viewVisible = true;
  res.data.relatedUsers = JSON.parse(res.data.relatedUsers);
  Object.assign(form.value, res.data);
  dialog.title = "分享需求";
};
  
  onMounted(() => {
  getTypes(route.params && (route.params.id as string));
});
  
  </script>
  <style scoped>
  :deep(img) {
    /* 样式内容 */
    width: 100px;
    height: 100px;
  }
  :deep(.ql-editor li) {
    display: flex;
    align-items: center; /* 水平居中（如果需要） */
    /* 样式内容 */
   width: 100%;
  }
  :deep(.ql-editor p) {
    display: flex;
    align-items: center; /* 水平居中（如果需要） */
    /* 样式内容 */
   width: 100%;
  }
  
  :deep(.ql-align-center) {
    display: flex;
    align-items: center; /* 水平居中（如果需要） */
    /* 样式内容 */
   width: 100%;
  }
  
  :deep(.content p) {
    display: flex;
    align-items: center; /* 水平居中（如果需要） */
    /* 样式内容 */
   width: 100%;
  }
  
  :deep(.content li) {
    display: flex;
    align-items: center; /* 水平居中（如果需要） */
    /* 样式内容 */
   width: 100%;
  }
  
  .content {
    border: 1px solid #d3d3d3;
    width: 100%;
  }
  
  .content img {
    max-width: 20%;
    margin-right: 5px;
    margin-left: 5px;
  }
  
  .content .ql-syntax {
    white-space: pre-line;
    word-wrap: break-word;
    /* 允许在适当的位置换行 */
    overflow-wrap: break-word;
  }
  
  .imgDolg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #imgDolgClose {
    position: fixed;
    top: 25px;
    cursor: pointer;
    right: 4%;
    font-size: 50px;
    color: white;
  }
  </style>
  